<template>
	<div class="game-container report-container vipRightConfig">
		<div class="view-container dealer-container">
			<div class="params">
				<el-form ref="form" :inline="true" :model="queryData">
					<el-form-item
						:label="`${$t('member.merchant_id')}:`"
						prop="merchantId"
						:rules="[
							{
								required: false,
								message: $t('member.please_select_a_merchant'),
								trigger: 'change'
							}
						]"
					>
						<merchant-select
							v-model="queryData.merchantId"
							v-symbols
							:placeholder="$t('common.please_choose')"
							@change="selectMerchantHandle(merchantList)"
						></merchant-select>
					</el-form-item>
					<el-form-item>
						<el-button
							type="primary"
							:disabled="!queryData.merchantId"
							size="medium"
							@click="query"
						>
							{{ $t('common.search') }}
						</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div v-if="isShow" class="content">
				<el-table
					v-loading="loading"
					element-loading-spinner="el-icon-loading"
					border
					size="mini"
					class="small-size-table"
					:data="dataList"
					style="width: 100%"
					:header-cell-style="getRowClass"
					highlight-current-row
				>
					<el-table-column
						align="center"
						:label="$t('common.vip_level')"
						prop="vipSerialNum"
						width="120"
					></el-table-column>
					<el-table-column
						prop="dayWithdrawalNum"
						align="center"
						:label="`vip${$t('member.daily_withdrawal_times')}`"
					>
						<template slot-scope="scope">
							<span>
								<el-input-number
									v-model="scope.row.dayWithdrawalNum"
									size="medium"
									:max="999"
									:min="0"
									:precision="0"
									:placeholder="$t('common.please_enter')"
									clearable
									style="width: auto"
									@blur="
										checkTransferValue(
											scope.row,
											'dayWithdrawalNum'
										)
									"
								></el-input-number>
							</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="dayWithdrawalQuota"
						align="center"
						:label="`${$t('member.day_withdrawal_quota')}（¥）`"
					>
						<template slot="header">
							<div>
								<span class="other-class">
									{{ $t('member.day_withdrawal_quota') }}
									({{ handleCurrency(currency, true) }})
								</span>
							</div>
						</template>
						<template slot-scope="scope">
							<span>
								<el-input-number
									v-model.number="
										scope.row.dayWithdrawalQuota
									"
									size="medium"
									:max="999999999999999"
									:min="0"
									:precision="0"
									:placeholder="$t('common.please_enter')"
									clearable
									style="width: auto"
									@blur="
										checkTransferValue(
											scope.row,
											'dayWithdrawalQuota'
										)
									"
								></el-input-number>
							</span>
						</template>
					</el-table-column>
					<el-table-column prop="dailyRebateCap" align="center">
						<template slot="header">
							<div>
								<span class="other-class">
									{{ $t('member.daily_rebate_cap') }}
									({{ handleCurrency(currency, true) }})
								</span>
							</div>
						</template>
						<template slot-scope="scope">
							<span>
								<el-input-number
									v-model.number="scope.row.dailyRebateCap"
									size="medium"
									:max="999999999999"
									:min="0"
									:precision="0"
									:placeholder="$t('common.please_enter')"
									clearable
									style="width: auto"
									@blur="
										checkTransferValue(
											scope.row,
											'dailyRebateCap'
										)
									"
								></el-input-number>
							</span>
						</template>
					</el-table-column>
					<el-table-column prop="upgradeBonus" align="center">
						<template slot="header">
							<div>
								<span class="other-class">
									{{ $t('member.upgrade_Bonus') }}
									({{ handleCurrency(currency, true) }})
								</span>
							</div>
						</template>
						<template slot-scope="scope">
							<span v-if="scope.row.vipSerialNum !== 'VIP0'">
								<el-input-number
									v-model="scope.row.upgradeBonus"
									size="medium"
									:max="999999999999"
									:min="0"
									:precision="0"
									:placeholder="$t('common.please_enter')"
									clearable
									style="width: auto"
									@blur="
										checkTransferValue(
											scope.row,
											'upgradeBonus'
										)
									"
								></el-input-number>
							</span>
							<span v-else>0</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="birthdayBonus"
						align="center"
						label="生日礼金（¥）"
					>
						<template slot="header" slot-scope="scope">
							<el-popover
								placement="top-start"
								:title="`${$t('member.tips')}`"
								width="280"
								trigger="hover"
							>
								<div v-if="!scope.row">
									<p>
										{{ $t('member.birthday_tips') }}
									</p>
									<p>
										{{ $t('member.number_tips') }}
									</p>
								</div>
								<div slot="reference" class="el-icon-question">
									<span class="other-class">
										{{ $t('member.birthday_bonus') }}({{
											handleCurrency(currency, true)
										}})
									</span>
								</div>
							</el-popover>
						</template>
						<template slot-scope="scope">
							<span v-if="scope.row.vipSerialNum !== 'VIP0'">
								<el-input-number
									v-model="scope.row.birthdayBonus"
									size="medium"
									:max="999999999999"
									:min="0"
									:precision="0"
									:placeholder="$t('common.please_enter')"
									clearable
									style="width: auto"
									@blur="
										checkTransferValue(
											scope.row,
											'birthdayBonus'
										)
									"
								></el-input-number>
							</span>
							<span v-else>0</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="aboveMonthRedEnvelope"
						align="center"
						label="上半月红包（¥）"
					>
						<template slot="header" slot-scope="scope">
							<el-popover
								placement="top-start"
								:title="`${$t('member.tips')}`"
								width="280"
								trigger="hover"
							>
								<div v-if="!scope.row">
									<p>{{ $t('member.above_tips') }}</p>
								</div>
								<div slot="reference" class="el-icon-question">
									<span class="other-class">
										{{
											$t(
												'member.above_month_red_envelope'
											)
										}}({{ handleCurrency(currency, true) }})
									</span>
								</div>
							</el-popover>
						</template>
						<template slot-scope="scope">
							<span v-if="scope.row.vipSerialNum !== 'VIP0'">
								<el-input-number
									v-model="scope.row.aboveMonthRedEnvelope"
									size="medium"
									:max="999999999999"
									:min="0"
									:precision="0"
									:placeholder="$t('common.please_enter')"
									clearable
									style="width: auto"
									@blur="
										checkTransferValue(
											scope.row,
											'aboveMonthRedEnvelope'
										)
									"
								></el-input-number>
							</span>
							<span v-else>0</span>
						</template>
					</el-table-column>
					<el-table-column align="center" label="下半月红包（¥）">
						<template slot="header" slot-scope="scope">
							<el-popover
								placement="top-start"
								:title="`${$t('member.tips')}`"
								width="280"
								trigger="hover"
							>
								<div v-if="!scope.row">
									<p>{{ $t('member.below_tips') }}</p>
								</div>
								<div slot="reference" class="el-icon-question">
									<span class="other-class">
										{{
											$t(
												'member.below_month_red_envelope'
											)
										}}({{ handleCurrency(currency, true) }})
									</span>
								</div>
							</el-popover>
						</template>
						<template slot-scope="scope">
							<span v-if="scope.row.vipSerialNum !== 'VIP0'">
								<el-input-number
									v-model="scope.row.belowMonthRedEnvelope"
									size="medium"
									:max="999999999999"
									:min="0"
									:precision="0"
									:placeholder="$t('common.please_enter')"
									clearable
									style="width: auto"
									@blur="
										checkTransferValue(
											scope.row,
											'belowMonthRedEnvelope'
										)
									"
								></el-input-number>
							</span>
							<span v-else>0</span>
						</template>
					</el-table-column>

					<el-table-column
						align="center"
						width="220"
						label="红包发放累计存款额度（¥）"
					>
						<template slot="header" slot-scope="scope">
							<el-popover
								placement="top-start"
								:title="`${$t('member.tips')}`"
								width="280"
								trigger="hover"
							>
								<div v-if="!scope.row">
									<p>
										{{ $t('member.deposit_limit_tips') }}
									</p>
								</div>
								<div slot="reference" class="el-icon-question">
									<span class="other-class">
										{{ $t('member.deposit_limit') }}({{
											handleCurrency(currency, true)
										}})
									</span>
								</div>
							</el-popover>
						</template>
						<template slot-scope="scope">
							<span v-if="scope.row.vipSerialNum !== 'VIP0'">
								<el-input-number
									v-model="scope.row.depositLimit"
									size="medium"
									:max="999999999999"
									:min="0"
									:precision="0"
									:placeholder="$t('common.please_enter')"
									clearable
									style="width: auto"
									@blur="
										checkTransferValue(
											scope.row,
											'depositLimit'
										)
									"
								></el-input-number>
							</span>
							<span v-else>0</span>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div v-if="isShow" class="btn_footer">
				<el-button
					v-if="hasPermission('104021')"
					type="primary"
					icon="el-icon-search"
					size="medium"
					@click="saveData()"
				>
					{{ $t('common.save') }}
				</el-button>
				<el-button
					v-if="hasPermission('104022')"
					icon="el-icon-refresh-left"
					size="medium"
					@click="resetData()"
				>
					{{ $t('member.restore_last_onfiguration') }}
				</el-button>
			</div>
		</div>
	</div>
</template>

<script>
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'

export default {
	name: routerNames.vipRightConfig,
	mixins: [list],
	data() {
		this.saveData = this.throttle(this.saveData, 1000)
		this.resetData = this.throttle(this.resetData, 1000)
		return {
			queryData: {
				merchantId: ''
			},
			merchantCurrency: [],
			isShow: false,
			dataList: [],
			currency: ''
		}
	},
	created() {
		if (!this.$store.getters.isZk) {
			this.queryData.merchantId = this.$store.getters.merchantInfo.id
			this.getmemberInComQuery({ merchantId: this.queryData.merchantId })
			this.currency = this.$store.getters.merchantInfo.currency
		}
	},
	methods: {
		getmemberInComQuery(val) {
			this.$api
				.memberInComQuery(val)
				.then((res) => {
					this.loading = false
					const { code, data, msg } = res
					if (res && code && code === 200) {
						this.isShow = true
						this.dataList = data || []
					} else {
						this.$message({
							message: res && msg,
							type: 'error'
						})
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		selectMerchantHandle(val) {
			this.merchantCurrency = val
		},
		query() {
			const params = this.queryData
			this.$refs.form.validate((valid) => {
				if (valid) {
					this.isShow = true
					this.getmemberInComQuery(params)
					for (let i = 0; i < this.merchantCurrency.length; i++) {
						const ele = this.merchantCurrency[i]
						if (this.queryData.merchantId === ele.id) {
							this.currency = ele.currency
						}
					}
				}
			})
		},
		checkTransferValue(row, type) {
			if (!row[type]) {
				row[type] = 0
			}
		},
		saveData() {
			this.$api
				.memberInComSave({
					incomeList: this.dataList
				})
				.then((res) => {
					const { code, msg } = res
					if (res && code === 200) {
						this.$message({
							message: this.$t('common.save_success'),
							type: 'success'
						})
					} else {
						this.$message({
							message: res && msg,
							type: 'error'
						})
					}
				})
				.catch(() => {})
		},
		resetData() {
			this.$api
				.memberInComComback({ merchantId: this.queryData.merchantId })
				.then((res) => {
					if (res?.code === 200) {
						this.dataList = res?.data || []
						this.$message({
							message: this.$t('common.reset_succeeded'),
							type: 'success'
						})
					} else {
						this.$message({
							message:
								res?.msg ||
								this.$t('member.request_was_aborted'),
							type: 'error'
						})
					}
				})
				.catch(() => {})
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}

::v-deep .el-input-number__decrease,
::v-deep .el-input-number__increase {
	display: none;
}

.btn_footer {
	text-align: center;
	margin-top: 50px;
}
</style>
